<template>
	<view class="container">
		<view class="form bg-fff">
			<view class="form-title">个人信息</view>
			<view class="form-item flex-space-between form-item-border">
				<view class="form-label flex-align-center">
					<view class="form-label-text">您的名字</view>
					<view class="form-label-required">*</view>
				</view>
				<view class="form-value">
					<input class="form-value-input form-padding" type="text" placeholder="请输入" v-model="form.name" />
				</view>
			</view>
			<view class="form-item flex-space-between form-item-border">
				<view class="form-label flex-align-center">
					<view class="form-label-text">性别</view>
					<view class="form-label-required">*</view>
				</view>
				<view class="form-value form-padding">
					<u-radio-group v-model="form.sex" :active-color="$setting.colorTheme()">
						<u-radio :name="1">男士</u-radio>
						<u-radio :name="0">女士</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="form-item flex-space-between form-item-border">
				<view class="form-label flex-align-center">
					<view class="form-label-text">手机号码</view>
					<view class="form-label-required">*</view>
				</view>
				<view class="form-value">
					<input class="form-value-input form-padding" type="number" placeholder="请输入" maxlength="11" v-model="form.phone" />
				</view>
			</view>
			<view class="form-item flex-space-between form-item-border">
				<view class="form-label flex-align-center">
					<view class="form-label-text">目前从事行业</view>
					<view class="form-label-required">*</view>
				</view>
				<view class="form-value">
					<input class="form-value-input form-padding" type="text" placeholder="请输入" v-model="form.business" />
				</view>
			</view>
			<view class="form-item flex-space-between form-item-border">
				<view class="form-label flex-align-center">
					<view class="form-label-text">从业时间</view>
					<view class="form-label-tips">(年)</view>
					<view class="form-label-required">*</view>
				</view>
				<view class="form-value">
					<input class="form-value-input form-padding" type="number" placeholder="请输入" v-model="form.business_time" />
				</view>
			</view>
			<view class="form-title">合作意向</view>
			<view class="form-item flex-space-between form-item-border">
				<view class="form-label flex-align-center">
					<view class="form-label-text">意向合作区域</view>
					<view class="form-label-required">*</view>
				</view>
				<view class="form-value flex-align-center" @click="regionShow = true">
					<input class="form-value-input form-padding" type="text" disabled placeholder="请选择省/市/区" v-model="region" />
					<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
				</view>
			</view>
			<view class="form-item flex-space-between form-item-border">
				<view class="form-label flex-align-center">
					<view class="form-label-text">意向合作区域城镇人口</view>
					<view class="form-label-tips">(万人)</view>
					<view class="form-label-required">*</view>
				</view>
				<view class="form-value">
					<input class="form-value-input form-padding" type="number" placeholder="请输入" v-model="form.population" />
				</view>
			</view>
			<view class="form-item flex-space-between form-item-border">
				<view class="form-label flex-align-center">
					<view class="form-label-text">可投入资金实力</view>
					<view class="form-label-tips">(单位: 万元)</view>
					<view class="form-label-required">*</view>
				</view>
				<view class="form-value">
					<input class="form-value-input form-padding" type="number" placeholder="请输入" v-model="form.capital" />
				</view>
			</view>
			<view class="form-item flex-space-between">
				<view class="form-label flex-align-center">
					<view class="form-label-text">是否现有核心操盘团队</view>
					<view class="form-label-tips">(3-5人)</view>
					<view class="form-label-required">*</view>
				</view>
				<view class="form-value form-padding">
					<u-radio-group v-model="form.has_group" :active-color="$setting.colorTheme()">
						<u-radio :name="1">是</u-radio>
						<u-radio :name="0">否</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		
		<view class="form bg-fff">
			<view class="form-title">自身优势</view>
			<view class="form-item flex-space-between">
				<view class="form-value form-padding flex-center">
					<u-input v-model="form.advantage" type="textarea" :clearable="false" :height="196" :custom-style="{background: '#F6F6F6', padding:'18rpx 23rpx', 'border-radius': '12rpx'}" placeholder="非必填内容" />
				</view>
			</view>
		</view>
		
		<b-u-button-theme width="630rpx" height="90rpx" @click="send()">确认提交</b-u-button-theme>
		
		
		<u-select v-model="regionShow" mode="mutil-column-auto" :default-value="regionDefault" :list="regionList" @confirm="regionConfirm"></u-select>
	</view>
</template>

<script>

export default {
	data() {
		return {
			form: {
				sex: 1,
				has_group: 1,
			},
			region: "",
			regionList: [],
			regionShow: false,
			regionDefault: [0,0,0],
		}
	},
	onLoad() {
		this.getHttp();
	},
	methods: {
		send() {
			if(uni.$u.test.isEmpty(this.form.name)) {
				uni.showToast({
					title: "请输入您的名字",
					icon: "none"
				})
			} else if(uni.$u.test.isEmpty(this.form.phone)) {
				uni.showToast({
					title: "请输入您的手机号码",
					icon: "none"
				})
			} else if(uni.$u.test.isEmpty(this.form.business)) {
				uni.showToast({
					title: "请输入您目前从事的行业",
					icon: "none"
				})
			} else if(uni.$u.test.isEmpty(this.form.business_time)) {
				uni.showToast({
					title: "请输入您的从业时间",
					icon: "none"
				})
			} else if(uni.$u.test.isEmpty(this.region)) {
				uni.showToast({
					title: "请选择意向合作区域",
					icon: "none"
				})
			} else if(uni.$u.test.isEmpty(this.form.population)) {
				uni.showToast({
					title: "请输入区域城镇人口",
					icon: "none"
				})
			} else if(uni.$u.test.isEmpty(this.form.capital)) {
				uni.showToast({
					title: "请输入您可投入的资金",
					icon: "none"
				})
			}else {
				uni.$u.api.postJoinApply(this.form).then(res => {
					uni.navigateTo({
						url: "/pages/index/finish"
					})
				})
			}
		},
		regionConfirm(e) {
			this.form.province_id = e[0].value;
			this.form.province = e[0].label;
			this.form.city_id = e[1].value;
			this.form.city = e[1].label;
			this.form.region_id = e[2].value;
			this.form.region = e[2].label;
			this.region = e[0].label+e[1].label+e[2].label;
			
			this.regionList.forEach((item,index) => {
				if(item.label == e[0].label) {
					item.children.forEach((it,idx) => {
						if(it.label == e[1].label) {
							it.children.forEach((i,ix) => {
								if(i.label == e[2].label) {
									this.regionDefault = [index, idx, ix];
								}
							})
						}
					})
				}
			})
		},
		getRegion() {
			uni.$u.api.getRegion().then(res => {
				this.regionList = res.regionData;
			})
		},
		getHttp() {
			this.getRegion();
		},
	},
}
</script>

<style lang="scss" scoped>
	.container {
		background: linear-gradient(180deg, #BB0024 0%, #F6F6F6 276rpx);
		padding: 34rpx 30rpx;
		
		.form {
			padding: 0 50rpx;
			border-radius: 16rpx;
			margin-bottom: 22rpx;
			
			.form-title {
				padding-top: 30rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #111111;
			}
			
			.form-item {
				
				.form-label {
					
					.form-label-text {
						font-size: 28rpx;
						color: #111111;
					}
					
					.form-label-required {
						font-size: 24rpx;
						color: #E80D0D;
					}
					
					.form-label-tips {
						font-size: 24rpx;
						color: #999999;
					}
				}
				
				.form-value {
					flex: 1;
					text-align: right;
					justify-content: flex-end;
					
					.form-value-input {
						margin-left: 30rpx;
						font-size: 28rpx;
					}

				}
				
				.form-padding {
					padding: 30rpx 0;
				}
			}
			
			.form-item-border {
				border-bottom: 1px solid #E1E1E1;
			}
		}
	}
</style>
